const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

let config = {
    mode: 'development',
    entry: {
        'index': './src/index.tsx'
    },
    resolve: {
        extensions: [".js", ".json", ".jsx", ".css", ".ts", ".tsx", ".js", "sass"],
    },
    output: {
        path: __dirname + "../../dev",
        filename: 'js/[name].js',
        chunkFilename: "js/[name].js",
        publicPath: ''
    },
    optimization: {
        runtimeChunk: {
            name: "manifest"
        },
        splitChunks: {
            cacheGroups: {
                common: {
                    chunks: "initial",
                    name: "common",
                    minChunks: 2,
                    maxInitialRequests: 5,
                    minSize: 0
                },
                vendor: {
                    test: /node_modules/,
                    chunks: "initial",
                    name: "vendor",
                    priority: 10,
                    enforce: true
                }
            }
        }
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.ProvidePlugin({
            "React": "react",
            "ReactDom": "react-dom"
        }),
        new HtmlWebpackPlugin({
            filename: "index" + '.html',
            template: 'template.html',
            inject: true,
            title: "index",
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunks: ['manifest', 'vendor', 'common', 'index'],
            hash: false,
            chunksSortMode: 'dependency'
        }),
    ],
    devtool: "source-map",
    module: {
        rules: [
            {
                test: /\.tsx?$/, loader: "awesome-typescript-loader"
            },
            {
                enforce: "pre", test: /\.js$/, loader: "source-map-loader"
            },
            {
                test: /\.(css)$/,
                loader: 'style-loader?sourceMap!css-loader?sourceMap',
                exclude: /node_modules/
            },
            {
                test: /\.scss$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader'],
            },
            {
                test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg|swf)$/,
                loader: 'file-loader?name=[name].[ext]&outputPath=' + "resource" + '/'
            }
        ]
    },
    devServer: {
        host: '0.0.0.0',
        port: 9000,
        hot: true,
        inline: true,
        historyApiFallback: true,
        disableHostCheck: true
    }
};
module.exports = config;